<style lang="scss" scoped>
@function float-text-3d($shadow-color: #bbb, $depth: 10, $floating: false) {
  $shadows: ();

  // When dropped, it will shrink like a spring. When floating, it grows into its shape.
  @for $i from 1 to $depth {
    @if ($floating == false and $i > $depth / 2) {
      $shadow-color: transparent;
    }
    $shadows: append($shadows, 0 ($i * 1px) $shadow-color, comma);
  }

  // When dropped, the shadow reveals. When floating, the shadow fades.
  @if ($floating == false) {
    $shadows: append($shadows, 0 10px 10px rgba(0, 0, 0, 0.4), comma);
  } @else {
    $shadows: append($shadows, 0 50px 25px rgba(0, 0, 0, 0.2), comma);
  }

  @return $shadows;
}
.loading {
  display: flex;
  color: white;
  font-size: 6em;
  font-family: "Baloo Bhaijaan", cursive;
  text-transform: uppercase;
  span {
    text-shadow: float-text-3d($floating: false);
    transform: translateY(20px);
    animation: bounce 0.3s ease infinite alternate;
  }
}
@keyframes bounce {
  to {
    text-shadow: float-text-3d($floating: true);
    transform: translateY(-20px);
  }
}
</style>
<template>
  <div class="loading">
    <span v-for="letter in letters" :key="letter" :style="spanStyle(letter)">{{
      letter
    }}</span>
  </div>
</template>

<script>
export default {
  props: {},
  computed: {},
  data() {
    return {
      letters: ["L", "O", "A", "D", "I", "N", "G"],
    };
  },
  methods: {
    spanStyle(l) {
      let index = this.letters.indexOf(l);
      return { animationDelay: `${index / 10}s` };
    },
  },
  mounted() {},
};
</script>
